<template>
	<view>
		<cu-custom slot="top" :isBack="true" :bgColor="'bg-'+ theme.themeColor">
			<block slot="backText">返回</block>
			<block slot="content">订单物流</block>
		</cu-custom>
		<view class="cu-bar bg-white" v-if="logistics.logisticsName">
			<view class="action">
				物流公司
			</view>
			<view class="action">
				<view class="text-black">{{logistics.logisticsName}}</view>
			</view>
		</view>
		<view class="cu-bar bg-white" v-if="logistics.logisticsNo">
			<view class="action">
				物流单号
			</view>
			<view class="action">
				<view class="text-black">{{logistics.logisticsNo}}
					<text class="padding-left-xs" :class="'text-'+theme.themeColor"
						@tap="copy(logistics.logisticsNo)">复制</text>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white" v-if="logistics.detailAddress">
			<view class="action">
				收货地址
			</view>
			<view class="action">
				<view class="text-black">{{logistics.detailAddress}}</view>
			</view>
		</view>
		<view class="cu-bar bg-white" v-if="logistics.stateDesc">
			<view class="action">
				物流状态
			</view>
			<view class="action">
				<view class='cu-tag' :class="'bg-' + theme.matchColor">{{logistics.stateDesc}}</view>
			</view>
		</view>
		<view class="padding-tb">
			<view class="cu-timeline solid-top padding">
				<view class="cu-time">
					物流信息
				</view>
				<view class="cu-item" v-for="(item,index) in logistics.orderLogisticsDetailList" :key="index"
					:class="index == 0 ? 'text-orange' :'text-gray'" v-if="!expandFlag ? index <2 : index >-1">
					<view>
						<view>{{item.logisticsTime}}</view> {{item.logisticsContext}}
					</view>
				</view>
			</view>
			<view v-if="logistics.orderLogisticsDetailList.length<=0"
				class="bg-white flex justify-center align-center text-orange">
				暂无物流信息
			</view>
			<view class="bg-white padding-xs flex justify-center align-center"
				v-if="logistics.orderLogisticsDetailList.length>0 && !expandFlag">
				<button class="cu-btn round" @tap="expandFlag=true" :class="'text-'+theme.themeColor">查看完整物流信息<text
						class="cuIcon-unfold padding-left-xs"></text></button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getById
	} from '@/api/orderlogistics.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				logistics: {
					orderLogisticsDetailList: []
				},
				expandFlag: false // 展开标识 true 展开 false 关闭
			}
		},
		onLoad(option) {
			getApp().initPage().then(res => {
				if (option.logisticsId) {
					this.getDetail(option.logisticsId);
				}

			})
		},
		methods: {
			getDetail(logisticsId) {
				getById(logisticsId).then(response => {
					this.logistics = response.data
				})
			},
			/**
			 * 复制物流单号
			 */
			copy(logisticsNo) {
				uni.setClipboardData({
					data: logisticsNo,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style>
</style>
